<script setup>
import { HeartOutlined, CommentOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import {ref} from "vue";

// 导入图片
import techImage from '@/assets/img/image.png'

// 导航菜单数据
const navItems = [
  { key: 'home', title: '首页' },
  { key: 'news', title: '资讯' },
  { key: 'digital', title: '数码' },
  { key: 'smart-car', title: '智能车' },
  { key: 'repository', title: '智库' },
  { key: 'events', title: '活动' },
  { key: 'meet', title: 'MEET大会' },
  { key: 'aigc', title: 'AIGC' },
]

// 轮播文章数据
const carouselArticles = [
  {
    id: 1,
    title: 'DeepSeek第五弹炸裂收官！开源全新并行文件系统',
    description: '基于SSD全部带宽的现代化文件系统，为AI时代提供高性能存储解决方案',
    imageUrl: techImage,
    likes: 128,
    comments: 32
  },
  {
    id: 2,
    title: '速来！人工智能未来设计大赛·大模型专项竞技赛火热报名中！',
    description: '大赛报名于2025年3月31日截止，感兴趣的团队欢迎尽快报名参赛，共同开启大模型赋能方物智能的新纪元！',
    imageUrl: techImage,
    likes: 256,
    comments: 48
  }
]

// 文章列表数据
const articles = [
  {
    id: 1,
    title: 'AI写代码新姿势：一个截图，代替千行代码',
    description: '人工智能正在改变传统的编程方式，通过图像识别和自然语言处理技术...',
    imageUrl: techImage,
    tag: '技术前沿',
    time: '16小时前',
    likes: 89,
    comments: 15
  },
  {
    id: 2,
    title: '快检查你的5090！英伟达官方确认缺陷',
    description: '最新发现的显卡问题可能影响性能表现...',
    imageUrl: techImage,
    tag: '硬件资讯',
    time: '1天前',
    likes: 235,
    comments: 67
  },
  {
    id: 3,
    title: '谷歌最新量子计算突破：实现100万量子比特模拟',
    description: '量子计算领域取得重大突破，为未来大规模量子计算机铺平道路...',
    imageUrl: techImage,
    tag: '前沿科技',
    time: '2天前',
    likes: 156,
    comments: 45
  },
  {
    id: 4,
    title: '新一代机器人技术：实现类人灵活性突破',
    description: '最新研发的仿生机器人在运动控制方面取得重大进展...',
    imageUrl: techImage,
    tag: '机器人',
    time: '3天前',
    likes: 198,
    comments: 53
  }
]

// 添加轮播控制方法
const carouselRef = ref(null)

const handlePrev = () => {
  carouselRef.value?.prev()
}

const handleNext = () => {
  carouselRef.value?.next()
}
</script>

<template>
  <div class="technology-container">
    <!-- 子导航栏 -->
    <div class="sub-nav">
      <a-menu mode="horizontal" :selected-keys="['home']">
        <a-menu-item v-for="item in navItems" :key="item.key">
          {{ item.title }}
        </a-menu-item>
      </a-menu>
    </div>

    <!-- 修改轮播图部分 -->
    <div class="carousel-container">
      <div class="carousel-arrow left" @click="handlePrev">
        <left-outlined />
      </div>
      <a-carousel class="carousel" autoplay ref="carouselRef">
        <div v-for="article in carouselArticles" :key="article.id">
          <div class="carousel-item">
            <img :src="article.imageUrl" :alt="article.title">
            <div class="carousel-content">
              <h2>{{ article.title }}</h2>
              <p>{{ article.description }}</p>
              <div class="carousel-actions">
                <span class="action-item">
                  <heart-outlined /> {{ article.likes }}
                </span>
                <span class="action-item">
                  <comment-outlined /> {{ article.comments }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </a-carousel>
      <div class="carousel-arrow right" @click="handleNext">
        <right-outlined />
      </div>
    </div>

    <!-- 文章列表部分 -->
    <div class="article-list">
      <a-row :gutter="[16, 16]">
        <a-col :span="16">
          <a-list :data-source="articles" item-layout="vertical" size="large">
            <template #renderItem="{ item }">
              <a-list-item key="item.id">
                <a-card hoverable>
                  <a-row>
                    <a-col :span="8">
                      <img :src="item.imageUrl" :alt="item.title" style="width: 100%" />
                    </a-col>
                    <a-col :span="16" class="article-content">
                      <h3>{{ item.title }}</h3>
                      <p>{{ item.description }}</p>
                      <div class="article-meta">
                        <a-tag>{{ item.tag }}</a-tag>
                        <span class="time">{{ item.time }}</span>
                        <div class="article-actions">
                          <span class="action-item">
                            <heart-outlined /> {{ item.likes }}
                          </span>
                          <span class="action-item">
                            <comment-outlined /> {{ item.comments }}
                          </span>
                        </div>
                      </div>
                    </a-col>
                  </a-row>
                </a-card>
              </a-list-item>
            </template>
          </a-list>
        </a-col>

        <a-col :span="8">
          <a-card title="热门文章" class="hot-articles">
            <a-list :data-source="articles" size="small">
              <template #renderItem="{ item }">
                <a-list-item>
                  <div class="hot-article-item">
                    <a href="#">{{ item.title }}</a>
                    <div class="hot-article-meta">
                      <span class="action-item">
                        <heart-outlined /> {{ item.likes }}
                      </span>
                      <span class="action-item">
                        <comment-outlined /> {{ item.comments }}
                      </span>
                    </div>
                  </div>
                </a-list-item>
              </template>
            </a-list>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style scoped>
.technology-container {
  padding: 0 24px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.sub-nav {
  margin-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.sub-nav :deep(.ant-menu) {
  border-bottom: none;
}

.sub-nav :deep(.ant-menu-item) {
  padding: 0 24px;
  font-size: 16px;
}

.carousel {
  margin-bottom: 24px;
}

.carousel-item {
  position: relative;
  height: 400px;
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
}

.carousel-content h2 {
  color: white;
  margin-bottom: 8px;
}

.article-content {
  padding: 16px;
}

.article-meta {
  margin-top: 16px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.article-meta .time {
  margin: 0 16px;
}

.action-item {
  margin-right: 16px;
  cursor: pointer;
}

.action-item:hover {
  color: #1890ff;
}

.hot-article-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hot-article-meta {
  flex-shrink: 0;
  margin-left: 16px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .technology-container {
    padding: 12px;
  }

  .carousel-item {
    height: 200px;
  }
}

/* 添加轮播箭头相关样式 */
.carousel-container {
  position: relative;
  margin-bottom: 24px;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  color: white;
  transition: all 0.3s;
}

.carousel-arrow:hover {
  background: rgba(0, 0, 0, 0.5);
}

.carousel-arrow.left {
  left: 20px;
}

.carousel-arrow.right {
  right: 20px;
}

/* 确保轮播图内容不会被箭头遮挡 */
.carousel-content {
  padding: 20px 60px;
}
</style>
